es6零基础教学解析彩票项目

之前虽然有看过一些文档和视频来讲解es6的语法。但是在项目中一般都没有使用过。应该是还是不太熟悉，没有真实的感受到es6的好处和便利。看了一小部分本课程的第4章之后。觉得以前真的是太肤浅了。es6真的是超级便利的，对前端开发人员来说真的是太友好了。

一.课程介绍

es6的兼容性：

所以需要使用构建工具来进行转码

二.项目构建

2-1 项目构建介绍

webpack-stream是对gulp的支持，gulp是通过stream的方式做的，二进制的流。

2-2 项目目录创建

在server目录下执行express -e .->npm install
在根目录下创建package.json文件 npm init
创建babel编译的文件 .babelrc
创建glupfile.babel.js文件，为什么不是glupfile.js文件，因为写的构建脚本都是使用es6的语法，如果不是glupfile.babel.js的话在执行时会报错

创建args.js文件
创建script.js文件

安装npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named ulp-livereload gulp=plumber gulp-rename gulp-uglify gulp-util yargs

2-3 命令行处理，创建JS编译任务脚本

2-4 创建模板、服务任务脚本

2-5 文件自动监听，项目构建测试

待完善

四.项目实战

4-1 需求分解和目录创建时

结构是面向对象，es6是倡导模块化的。
模块化要实现的目标：功能单一。每一个模块提供的功能就是单一的功能
app/js/lottery/timer.js 倒计时模块
app/js/lottery/interface.js 接口模块-负责跟彩票中心（相当于后台）交互的模块
app/js/lottery/calculate.js 计算模块-负责彩票投注数和奖金数运算的
app/js/lottery/base.js 基础模块-跟彩票本身相关的基础信息的模块
app/js/lottery.js 整合模块-特殊模块2，负责整合被分散的模块
app/js/index.js 入口模块-特殊模块1，负责处理整个应用的入口管理

4-2 创建倒计时模块timer.js

倒计时模块是使用 class 的方式写的。
支持2个回调函数传入，一个是倒计时更新的回调函数，一个是倒计时结束的回调函数。
这里注意到回调函数都使用 call 的方式来使用，目的是为了保证 this 指向保持不变，所以使用 call 并且传入 self。
这里的倒计时主要逻辑在于 setTimeout 部分，通过 setTimeout 不断调用自身 countdown 函数来实现了倒计时的效果。

4-3 创建接口模块

导入了 jquery 模块来使用，导入的目的是因为这个接口模块里面使用了其他模块的函数，例如self.setOmit(res.data);，因为这个函数里面涉及了 jquery 的相关使用，所以如果在这里需要使用的话，就要引入 jquery
使用let self = this来保存this对象是因为箭头函数的this指向是在定义的时候，而不是运行的时候
promise进行异步操作，promise可以代替 es5的无限回调问题。
这里 resolve 使用 call 的意思也是保持 this 指向不被改变。
类里面的方法之间并没有使用逗号来分隔，每一个都是独立的。
我的理解。promise就是为了方便模块化。通过模块化统一请求链接，然后针对不同的业务执行不同的回调
在promise方法内部调用对象的其他方法来传递数据，避免了回调

4-4 创建数据计算模块（上）

has(key)方法返回一个布尔值，表示某个键是否在当前Map对象之中。

fill() 使用自己想要的参数替换原数组内容，但是会改变原来的数组。可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
new Array(active).fill('0'); 指定长度并且每一项填充为’0’的数组
若是使用es5的话需要将数组先循环，然后将每一项赋值之后push进数组

Calculate.combine() es6支持 static 静态方法，所以可以实现调用静态方法的处理，由于是静态方法，所以需要使用class 来调用。

.at(0) 来指定第一位
ES5 对字符串对象提供 charAt()，返回字符串给定位置的字符。该方法不能识别码点大于 0xFFFF 的字符。（不能正确返回中文）
es6 字符串实例的 at()，可以识别 Unicode 编号大于 0xFFFF 的字符，返回正确的字符。(能正确返回中文)

4-6 创建彩票基础模块

导入 jquery，因为需要操作 dom 数据。
padStart(2,'0') 用于头部补全；让每个字符串保持两位的长度，如果长度不够则在起始位置加上0

map 结构的应用：
清空数据 clear() self.open_code.clear();
添加数据 set()

this.play_list.set('r2',{
  bonus:6,
  tip:'...',
  name:'...'
})

获取数据 get() self.play_list.get(self.cur_play).tip
遍历数据可以使用 for…of 的方式，使用omit 的 entries()获取到所有值，然后遍历
entries() 返回键值对的遍历器

1
2
3

for(let [index,item] of omit.entries()){
  self.omit.set(index,item)
}

es6的字符串模板，代替了以往的+的方式，非常直观并且简单。

tpl=`您选了 <b>${count}</b> 注，共 <b>${count*2}</b> 元  <em>若中奖，奖金：
  <strong class="red">${range[0]}</strong> 至 <strong class="red">${range[1]}</strong> 元，
  您将${(win1<0&&win2<0)?'亏损':'盈利'}
  <strong class="${win1>=0?'red':'green'}">${c1} </strong>
  至 <strong class="${win2>=0?'red':'green'}"> ${c2} </strong>
  元</em>`

set数据结构不允许里面的元素是重复的

Array.from(this.number); ES6为Array增加了from函数用来将其他对象转换成数组。
当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。
1.部署了Iterator接口的对象，比如：Set，Map，Array。
2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

4-9 创建彩票业务模块

导入模块：导入所有需要的模块，因为这个是整合模块，所以需要导入所有之前写的模块。路径是从当前模块文件的路径开始计算。
因为有些语法需要使用babel-polyfill来处理，所以需要先导入它。

import 'babel-polyfill';
import Base from './lottery/base.js';
import Timer from './lottery/timer.js';
import Calculate from './lottery/calculate.js';
import Interface from './lottery/interface.js';
import $ from 'jquery';

深度拷贝：这里使用深度拷贝的原因是因为复制的是对象，并且使用es6的方式进行深度拷贝。
es6里面Reflect.ownKeys可以拿到原对象的所有属性。参考Reflect
构造函数，原型，name 这3个属性不需要拷贝，所以要排除。

const copyProperties = function (target, source) {
    for (let key of Reflect.ownKeys(source)) {  //拿到源对象上的所有属性
        if (key !== 'constructor' && key !== 'prototype' && key !== 'name') {  //过滤
            let desc = Object.getOwnPropertyDescriptor(source, key); // 获取指定对象的自身属性描述符
            Object.defineProperty(target, key, desc);
        }
    }
}

注：关于Object.defineProperty和Object.getOwnPropertyDescriptor
前者就是为了给对象定义或修改属性的，如果配合后者来使用的话，那么就会变成直接给目标对象定义一个真实可用的属性（因为后者可以获取源对象的真实属性）
通过遍历使用，就相当于能够复制了一个新对象了。
https://blog.csdn.net/weixin_34015336/article/details/87948426